<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hotCities="hotCities"></city-list>
  </div>
</template>

<script>
import axios from "axios";
import cityHeader from "./components/header";
import cityList from "./components/list";
import citySearch from './components/search'
export default {
  name: "city",
  components: {
    cityHeader,
    cityList,
    citySearch
  },
  data(){
    return{
      cities:{},
      hotCities:[]
    }
  },
  methods: {
    getCityInfo() {
      axios.get("/api/city.json").then(this.getCityInfoSucc);
    },
    getCityInfoSucc(res) {
     res=res.data
     if(res.ret && res.data){
        const data=res.data
        this.cities=data.cities
        this.hotCities=data.hotCities
     }
    }
  },
  mounted() {
    this.getCityInfo();
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.header {
  line-height: 1.3rem;
  background: $bgColor;
  color: #fff;
}
</style>